<script setup>
// import { ref } from 'vue'
import { useScroll } from '@vueuse/core'
import Footer from '../../components/footer.vue'

const { y } = useScroll(window)

</script>
<template>
    <div class="white"></div>
    <div class="head">
        <div class="w">
            <div class="text">
                <div class="text1">课程详情</div>
                <div class="text2">></div>
                <div class="text3">课程详情</div>
            </div>
            <div class="title">心理健康教师岗位能力建设落地班</div>
            <div class="title2">聚焦学校场景心理健康危机预防</div>
        </div>
    </div>
    <div class="body">
        <div class="content w">
            <div class="left">
                <img src="/image/img1.png" alt="">
                <img src="/image/img2.png" alt="">
                <img src="/image/img3.png" alt="">
                <img src="/image/img4.png" alt="">
            </div>
            <div class="right">
                <div class="code" :class="{ fixed: y >= 251 }">
                    <img src="/image/code.png" alt="">
                    <div class="code-right">
                        <div class="bg"></div>
                        <div class="textm">添加课程老师微信</div>
                        <div class="textm">了解详情</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footer></Footer>
</template>
<style scoped>
.white {
    width: 100%;
    height: 80px;
}

.fixed {
    position: sticky;
    /* 偏移 */
    top: 104px;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

.head {
    width: 100%;
    height: 195px;
    background: url(/image/header.png) no-repeat center center;
    background-color: #FCECDD;

    .text {
        padding-top: 42px;
        display: flex;
        align-items: center;

        .text1 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }

        .text2 {
            margin: 0 8px;
            color: #FFFFFF;

        }

        .text3 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            opacity: 0.5;
        }
    }

    .title {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        margin-top: 22px;
    }

    .title2 {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.5;
        margin-top: 8px;
    }
}

.body {
    width: 100%;
    background-color: #FCECDD;

    .content {
        display: flex;
        padding: 80px 0;

        .code {
            display: flex;
            width: 456px;
            height: 168px;
            background: #FFFFFF;
            border-radius: 16px;
            border: 1px solid #D9D9D9;
            padding: 24px;

            .code-right {
                margin-left: 16px;

                .bg {
                    width: 40px;
                    height: 40px;
                    background: url(/image/code2.png) no-repeat center center;
                    margin-bottom: 8px;
                }

                .textm {
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>